.index-content{
  width: 100%;
}

.main {
  display: flex;
  margin: auto;
}

.main-left {
  margin-left: 11px;
  width: 1263px;
}

.main-right {
  width: 626px;
}

.video-container {
  height: 688px;
  background-image: url(../img/common/video_border.png);
  background-size: 100% 100%;
  margin-bottom: 16px;
  display: flex;
  padding: 6px;
  box-sizing: border-box;
}

.video-container img{
  flex: 1;
  height: 100%;
}

.warning-container {
  display: flex;
}

.environment,
.robot,
.waveform {
  background-image: url(../img/common/rail_bg.png);
  background-size: 100% 100%;
  width: 50%;
  height: 228px;
}

.warning-title {
  font-size: 18px;
  color: #FFFFFF;
  margin: 8px 0 0 28px;
  display: inline-block;
}

.robot-control,
.camera-control {
  background-image: url(../img/common/rectangle_bg.png);
  background-size: 100% 100%;
  height: 337.5px;
  margin-bottom: 9px;
}

.camera-control {
  margin-bottom: 20px;
}

.control-title {
  font-size: 18px;
  color: #FFFFFF;
  display: inline-block;
  margin: 3px 0 0 18px;
}

.main-right .waveform {
  width: 100%;
}

.robot-control-main {
  display: flex;
  height: 300px;
  margin-top: 10px;
}

.robot-control-left {
  width: 176px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.btn_1,
.btn_2 {
  cursor: pointer;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  margin: 17px 0;
  background-size: 100% 100%;
}

.btn_1 {
  background-image: url(../img/common/btn_1_up.png);
}

.btn_1:active {
  background-image: url(../img/common/btn_1_up_HL.png);
}


.btn_2 {
  background-image: url(../img/common/btn_1_dowm.png);
}

.btn_2:active {
  background-image: url(../img/common/btn_1_down_HL.png);
}

.control-btn-container {
  display: flex;
  justify-content: space-around;
  margin-top: 28px;
}

.control-btn-container li {
  background-image: url(../img/common/border_1.png);
  background-size: 100% 100%;
  width: 89px;
  line-height: 46px;
  text-align: center;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

.control-btn-container li:active {
  background-image: url(../img/common/border_1_HL.png);
  text-shadow: 0 0 6px #FFF;
}

.count-container {
  display: flex;
}

#electric-quantity,
#distance {
  width: 200px;
  height: 200px;
}

.camera-control-main {
  display: flex;
  height: 300px;
  margin-top: 10px;
}

.camera-control-left {
  width: 334px;
  position: relative;
}

.btn_down,
.btn_left,
.btn_right,
.btn_up {
  width: 69px;
  height: 69px;
  border-radius: 50%;
  overflow: hidden;
  position: absolute;
  cursor: pointer;
}

.btn_up {
  left: 166px;
  top: 50px;
  background-image: url(../img/common/btn_2_up.png);
  background-size: 100% 100%;
}

.btn_up:active {
  background-image: url(../img/common/btn_2_up_HL.png);
}


.btn_right {
  top: 120px;
  right: 0;
  background-image: url(../img/common/btn_2_right.png);
  background-size: 100% 100%;
}

.btn_right:active {
  background-image: url(../img/common/btn_2_right_HL.png);
}

.btn_down {
  left: 166px;
  bottom: 41px;
  background-image: url(../img/common/btn_2_down.png);
  background-size: 100% 100%;
}

.btn_down:active {
  background-image: url(../img/common/btn_2_down_HL.png);
}


.btn_left {
  left: 66px;
  top: 120px;
  background-image: url(../img/common/btn_2_left.png);
  background-size: 100% 100%;
}

.btn_left:active {
  background-image: url(../img/common/btn_2_left_HL.png);
}


.btn_down img,
.btn_left img,
.btn_right img,
.btn_up img {
  width: 100%;
}

.camera-control-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.camera-control-right div {
  background-image: url(../img/common/border_1.png);
  background-size: 100% 100%;
  color: #fff;
  font-size: 15px;
  width: 104px;
  line-height: 45px;
  text-align: center;
  cursor: pointer;
  margin: 15px 0;
}

.camera-control-right div:active {
  background-image: url(../img/common/border_1_HL.png);
  text-shadow: 0 0 6px #FFF;
}

.waveform-main {
  height: 185px;
  margin-top: 4px;
  padding: 0 25px;
  box-sizing: border-box;
}

.environment-main,
.robot-main {
  display: flex;
  flex-wrap: wrap;
  height: 185px;
  margin-top: 4px;
  padding: 20px;
  box-sizing: border-box;
  align-items: center;
}

.environment-main li,
.robot-main li {
  width: 33%;
  font-size: 16px;
  color: #FFFFFF;
  display: flex;
  align-items: center;
}


.environment-img,
.robot-img {
  width: 24px;
  height: 24px;
  margin-right: 10px;
  /* background-image: url(../img/common/warning.png); */
  background-size: 100% 100%;
}

.environment-active .environment-img,
.robot-active .robot-img {
  animation: activeImg 0.5s linear infinite;
  -webkit-animation: activeImg 0.5s linear infinite;
}

@keyframes activeImg {
  0% {
    /* background-image: url(../img/common/warning.png); */
  }

  100% {
    background-image: url(../img/common/warning_HL.png);
  }
}

.environment-active span,
.robot-active span {
  animation: activeText 0.5s linear infinite;
  -webkit-animation: activeText 0.5s linear infinite;
}

@keyframes activeText {
  0% {
    color: #fff;
  }

  /* 50% {
    color: #FCFF00;
  } */

  100% {
    color: #FCFF00;
    text-shadow: 0 0 6px #FFF;
  }
}